<template>
    <div class="pic_grid app_width">
        <div v-for="(item,index) of projectinfos"

             :key="index">


            <div class="icon-item">
                <router-link :to="'/projectinfoDetail?id='+item.projectinfoid">
                    <div :style="{backgroundImage: `url(${BASE_API+item.image})`}" class="pan-thumb"></div>
                    <span>{{ item.projectinfoname }}</span>
                </router-link>
            </div>

        </div>
    </div>


</template>

<script name="projectinfo" setup>

import {onMounted, ref, watch} from "vue";

const postFormRef = ref(null) // 如果页面有表单,则使用此ref
const route = useRoute();   //获取路由中的信息或参数
const router = useRouter();   //操作路由,跳转之类的
import {ElMessage, ElMessageBox} from "element-plus";  //提示框和消息


import axios_request from '../util/axios_request.js'
import {useRoute, useRouter} from "vue-router";


const projectinfos = ref(null)
const BASE_API = ref('http://localhost:8081/');


const listQuery = ref({//当前页数，支持 .sync 修饰符

    keyword: '',//搜索关键词
    pageNumber: 1,//当前页
    pageSize: 12,//,每页多少
    rowCountTotal: 0//记录总数 默认全是0,让后台重复记算总数,因为存在,点了搜索选项,然后直接点翻页,带入总数的话,翻页出错
})


onMounted(() => {
    getList()


})


watch(() => route, newdata => {
    // 如果路由参数有变化，会再次执行获取列表数据
    getList()

}, {deep: true})

function getList() {


    // 列表页 //审核过的
    axios_request.get('/web/projectinfo.action', {
        params: listQuery.value
    }).then(response => {
        projectinfos.value = null
        projectinfos.value = response.data

    })

}

//当前页输入框
function handleCurrentChange(val) {
    listQuery.value.pageNumber = val
    getList()
}


</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.image_banner {
    width: 98%;
    height: 100%;
    max-height: 320px;

}


.carousel-images {
    font-size: 14px;

    margin-bottom: 15px;

    color: #666;

    .image {
        width: 100%;
        height: 100%;

    }


}

li {
    list-style: none;
}


.grid {
    position: relative;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

.icon-item {
    text-align: center;
    font-size: 30px;
    color: #24292e;
    cursor: pointer;
    margin-bottom: 30px;

    img {
        width: 90%;
        height: 150px;

    }

    span {
        clear: both;
        display: inline-block;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 85%;
        overflow: hidden;
        text-align: center;
        margin: 0;
        padding: 0;

    }
}


</style>
